<!-- src/views/HomeView.vue -->
<template>
  <div class="home">
    <el-container>
      <el-header>
        <h1>📚 图书管理系统</h1>
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="home-card" @click="goToBooks">
              <el-icon><Reading /></el-icon>
              <div class="card-content">
                <h3>图书管理</h3>
                <p>查看、添加、编辑图书信息</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="home-card" @click="goToSearch">
              <el-icon><Search /></el-icon>
              <div class="card-content">
                <h3>图书搜索</h3>
                <p>按作者、分类搜索图书</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="home-card" @click="goToBorrow">
              <el-icon><Collection /></el-icon>
              <div class="card-content">
                <h3>借阅管理</h3>
                <p>处理图书借阅和归还</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { Reading, Search, Collection } from '@element-plus/icons-vue'

export default {
  name: 'HomeView',
  components: {
    Reading,
    Search,
    Collection
  },
  methods: {
    goToBooks() {
      this.$router.push('/books')
    },
    goToSearch() {
      this.$router.push('/books/search')
    },
    goToBorrow() {
      this.$router.push('/borrow')
    }
  }
}
</script>

<style scoped>
.home {
  height: 100vh;
}
.el-header {
  background-color: #409EFF;
  color: white;
  text-align: center;
  line-height: 60px;
}
.home-card {
  cursor: pointer;
  transition: transform 0.2s;
  height: 150px;
}
.home-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.card-content {
  margin-left: 16px;
}
.card-content h3 {
  margin: 0 0 8px 0;
  color: #333;
}
.card-content p {
  color: #666;
  margin: 0;
}
</style>